<template>
  <div id = "building" style="width : 100%; height: 100vh ;background-color: #fff; overflow: hidden" >
 <div style = "width: 400px; margin : 150px auto">
   <div style ="color: lightgoldenrodyellow;font-size:50px; text-align: center ;padding:30px 0">欢迎登录</div>
   <el-form :model="form" size = "normal" :rules="rules" ref="form">

     <el-form-item prop="user_id" >
       <el-input  :prefix-icon="User"  v-model="form.user_id" />
     </el-form-item>

     <el-form-item prop="user_password">
       <el-input :prefix-icon="Lock"   v-model="form.user_password" show-password />
     </el-form-item>

     <el-form-item >
       <el-button style="width:100% " type ="primary" @click= "login">登录</el-button>
     </el-form-item>

     <el-form-item >
       <el-button style="width:100% " type ="primary" @click= "register">注册新用户</el-button>
     </el-form-item>
     </el-form>
 </div>
</div>


</template>

<script >
import {Lock, Search, Unlock, User} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ref} from "vue";

export default{
  name: "Login",
  components: {},
  computed: {
    Lock() {
      return Lock
    },
    Unlock() {
      return Unlock
    },
    User() {
      return User
    },

  },
  data(){
    return{
      form:{},
      rules:{
        user_id :[
          { required : true , message : '请输入学生ID',trigger :'blur'},
        ],
        user_password:[
          {
            required: true ,message :'请输入密码',trigger :'blur'},
        ],

      }
    }
  },

//登录实现
  methods:{
    login(){
      this.$refs['form'].validate((valid) =>{
        if(valid){
          request.post("/user/login",this.form).then(res => {
            if (res.code === '100') {
              this.$message({
                type:"success",
                message:"欢迎登录研究生奖学金系统"
              })
              this.$router.push("/home")    //跳转页面
            } else {
              this.$message({
                type:"error",
                message:"用户名或密码错误"
              })

            }

          })
        }
      })

    },
   register(){
     this.$router.push("/register")
   }
}}




</script>


<style scoped>


#building {
  /*设置透明度，0为完全透明，1为不透明*/
   background: url("../assets/1.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  opacity: 0.85;
}

</style>